<template>

    <view class="orderPage allPage">

        <view class="headNav">

            <view class="fixed">

                <!-- <view class="types">

                    <view class="slider_box">
                        <scrollTab :menuArr="menuArr" @change="swicthTypes" v-model=" typeIdx " />
                    </view>

                </view> -->

                <view class="ul">

                    <view class="ul-inside">

                        <view v-for="item,idx in titleNav" :key="idx" class="li" :class="{'active': idx == navIdx }" @click='switchTit(idx)'>{{item.name}}</view>

                        <view class="scroll-line transBg" :style="'left:'+ (navIdx * 33.33)+'%'    "></view>
                    </view>

                </view>
            </view>

        </view>

        <!-- <view class="brandName ">
            <view class="brandHead down" catchtap="chooseMenu" data-type='1'>{{searchArr[searchIdx]}}</view>
            <view class="brandKeyWord">
                <view class="d">
                    <image src="https://image.qmxip.com/web/sjbd/index/sea.png" alt="搜索" mode='widthFix' catchtap="goSearch"></image>
                    <view class="p text-delic">
                        <input type="text" maxlength="50" value='{{searchkey}}' bindinput='bindinputFunc' confirm-type='search' bindconfirm='goSearch'></input>
                    </view>
                </view>
            </view>
        </view> -->

        <!-- //列表 -->
        <view class="list-box" v-if='!isHide'>
            <view v-if="typeIdx == 0">
                <view v-for="item,idx in listData" :key="idx">
                    <GoodsOrder :listData="item" @handleClick="handleGoodsClick" handle="user" />
                </view>

            </view>
 
            <view class="nolist" v-if="showNodata && total == 0">
                
                <no-data></no-data>

            </view>

            <!-- <view class="textbg">
                
            </view> -->
              
        </view>

        <GetPhone :isShow.sync="showPhone" @finish="finishAuth" onlyBox/>

        <FollowWx styleCss='bottom'/>

    </view>

</template>
<script>

import { GoPayOrder } from '../../../utils/pay.js'
import WxPushMessage from '../../../utils/message.js'
import GoodsOrder from '@/components/GoodsOrder'
import { statusList, DealOrderInfo } from '../../../utils/configDIct.js'
import GetPhone from '@/components/GetPhone'
import FollowWx from '@/components/FollowWx'

const app = getApp();
export default {
    components: { GoodsOrder  , GetPhone ,FollowWx  },
    data () {
        return {
            showPhone:false,
            //滑动导航
            // menuArr: [{ name: '超市订单', 'color': '#1287fa' }, { name: '快递订单', 'color': '#1287fa' }],
            typeIdx: 0,


            titleNav: [
                { name: "全部订单", code: undefined },
                { name: "进行中", code: statusList.filter(i => i.num != 70000 ).map(i => i.num) },
                { name: "已完成", code: statusList.filter(i => i.num == 70000).map(i => i.num) },
            ],
            navIdx: 0,
            searchArr: ['商标名称', '申请人', '申请号'],
            searchIdx: 0,
            searchkey: "",
            headHeight: 0,
            params: {},
            listData: [],
            orderStatus: '', //状态

            totalPage: 0,  //总页数
            showNodata: false,
            queryForm: {
                pageNum: 1, //第几页
                pageSize: 5,
                orderStatusList: []
            },
            total: 0,
            // （1待提交 5待支付 10配货中 15待配送 20配送中 25已完成 30已取消）
            statusList: statusList,
            
            isHide:false


        }
    },
    onShow () {

         this.isHide = false

        if (this.showNodata) {
            this.initPage()
        }
          app.laterToken(bool => {

            app.logRecord('订单列表')

        })


    },
    onLoad (option) {

        let index = Number(option.nav || 0)

        if (option.status) {

            this.titleNav.map((item, idx) => {

                if (item.code[0] == option.status) {
                    index = idx
                }

            })
        }

        this.navIdx = 0

        this.typeIdx = index

        this.queryForm.orderStatusList = this.titleNav[index].code


        app.laterToken(() => {

            this.initPage()
            
        })



    },
    methods: {
        initPage (cb) {

            
            if( !app.globalData.userId ){

                this.showPhone = true
                return


            }
            

            let requireUrl =  'flash/supermarket/order/wddd/page/list?loading' 

            this.$axios({ url: requireUrl, data: this.queryForm })
                .then(res => {

                    // console.log('哈哈哈哈', res)

                    // let data = DealOrderInfo(res.data ,this.statusList)

                    this.$set(this.listData, this.queryForm.pageNum - 1, DealOrderInfo(res.data, this.statusList))

                    // if(  this.queryForm.pageNum == 1  ){
                    //     this.listData = data

                    // }
                    // else{
                    //     this.listData = this.listData.concat( data ) 
                    // }

                    this.total = res.total

                    this.showNodata = true

                    cb && cb()
                })
        },
        finishAuth(){
            this.initPage()
        },
        //切换订单种类
        swicthTypes (idx) {

            this.listData = []
            this.queryForm.pageNum = 1

            this.initPage()

        },
        switchTit (i) {

            if (i != this.navIdx) {

                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: 10
                });

                this.listData = []

                this.queryForm.pageNum = 1
                this.queryForm.orderStatusList = this.titleNav[i].code

                this.navIdx = i

                this.initPage()
            }
        },

        cancelOrder (item) {

            uni.showModal({
                // title: '标题',
                content: '是否取消此条订单？',
                showCancel: true,
                cancelText: '取消',
                confirmText: '确定',
                success: (res) => {

                    // console.log('812',res)
                    if (res.confirm) {
                        this.$axios({ url: `flash/supermarket/order/batch/del`, type: "POST", data: [item.id] })
                            .then((res) => {
                                if (res.code != 200) return
                                uni.showToast({
                                    title: '取消订单成功',
                                    icon: 'success',
                                    success: () => {

                                        this.pageNum = 1

                                        setTimeout(() => {
                                            this.initPage()
                                        }, 1000);
                                    }
                                });
                            })
                    }
                }
            });

        },
        gopay (item) {

            GoPayOrder([item.id], item.orderMoney ,(success) => {


                this.$goNext('/pages/paySuccess/index?orderId='+item.id )

                // WxPushMessage.authorizationBtn(1, (bool) => {

                //     console.log('已申请看看', bool)

                // })

                // this.initPage()

            }, fail => {

            })
        },
        //下拉刷新
        onPullDownRefresh () {

            this.queryForm.pageNum = 1


            this.initPage(() => {
                uni.stopPullDownRefresh();//停止刷新
            })

        },
        onReachBottom () {
            console.log('触底了')

            if (this.queryForm.pageNum * this.queryForm.pageSize < this.total) {

                this.queryForm.pageNum += 1

                this.initPage()
            }

        },
        goDetail (row) {

            console.log("啊打算结婚啊是看得见哈上的讲话", row)

            this.$goNext('/pages/center/order/detail?id=' + row.id)
        },
        handleClick (type, row) {
            console.log('点击类型', type)

            if (type == 'detail') {
                this.$goNext('/pages/expressList/info?id=' + row.id)
            }
            else if (type == 'again') {

                let goodsId = row.orderGoodsModelList[0].goodsId

                this.$goNext('/pages/supermarket/product/index?id=' + goodsId)
            }

        },
        handleGoodsClick (type, row) {

            console.log(row)

            if (type == 'cancel') {
                // this.cancelOrder(row)

                this.$goNext('/pages/center/order/cancel?id=' + row.id)
            }
            else if (type == 'pay') {
                this.gopay(row)
            }
            else if (type == 'detail') {
                this.$goNext('./detail?id=' + row.id)
            }
            else if (type == 'again') {

                let goodsId = row.orderGoodsModelList[0].goodsId

                this.$goNext('/pages/supermarket/product/index?id=' + goodsId)
            }

        },
        onHide() {

            this.isHide = true
            console.log('隐藏了111111111111')
        },


    }
}
</script>
<style lang="scss" scoped>
.headNav {
    height: 100rpx;
    width: 100%;
    .fixed {
        box-sizing: border-box;
        position: fixed;
        height: 100rpx;
        background: #fff;
        border-bottom: 2rpx solid #eaeaea;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 10;
    }
    .types {
        height: 80rpx;
        padding: 10rpx 32rpx 0;
        box-sizing: border-box;
        text-align: center;
        .slider_box {
            display: inline-block;
            width: 100%;
        }
    }
}
.headNav .ul {
    padding: 0 80rpx;
    .ul-inside {
        position: relative;
        height: 80rpx;
        line-height: 80rpx;
        margin-bottom: 20rpx;
        box-sizing: border-box;
    }
    .scroll-line {
        position: absolute;
        bottom: 0;
        width: 33.33%;
        height: 4rpx;
        // background: #333;
        border-radius: 8px;
        z-index: 2;
        transition: all 0.2s;
    }
}
.headNav .li {
    box-sizing: border-box;
    display: inline-block;
    width: 33.33%;
    height: 100%;
    color: #d7d7d7;
    // border-bottom: 4rpx solid #fff;
    text-align: center;
    box-sizing: border-box;
    font-size: 28rpx;
    transition: all 0.3s;
}

.headNav .li.active {
    color: #333;
    // border-bottom: 4rpx solid #1989fa;
}
.list-box {
    padding: 20rpx 32rpx 60rpx;
}

.nolist {
    margin-top: 100rpx;
    text-align: center;
    font-size: 28rpx;
    color: #565656;
}

/* //新增搜索框 */
.brandName {
    background-color: #ffffff;
    padding: 20rpx 0;
}
.brandKeyWord,
.brandKeyWord .p,
.brandName .brandHead {
    height: 64rpx;
    line-height: 64rpx;
}
.brandName image {
    margin-top: 15rpx;
}
/* //公共部分 */
.common-box {
    overflow: hidden;
}
.common-box image {
    float: left;
    width: 160rpx;
    height: 140rpx;
    text-align: center;
    line-height: 60px;
    border: 1px solid #eee;
    overflow: hidden;
    margin-right: 30rpx;
}
// **************************************************************************************************.active
.selectList {
    box-sizing: border-box;
    width: 100%;
    z-index: 12;
    padding: 10px 0px 14px;
    background: #fff;
    font-size: 12px;
    transition: all 0.4s;
    margin-bottom: 32rpx;
    border-radius: 6px;
    box-shadow: 0 0 4px #eaeaea;
    .head {
        display: flex;
        width: 100%;
        // margin-bottom: 20rpx;
        padding: 0 32rpx 20rpx;
        border-bottom: 1rpx solid #eaeaea;
        font-size: 28rpx;
        color: #333;
        .head-l {
            width: 100%;
            flex: 1;
            .s-name {
                flex: 1;

                width: 100%;
            }
        }
        .head-r {
            margin-left: 10px;
        }
    }
    .priceBox {
        padding: 0 32rpx 10rpx;
        font-size: 34rpx;
        .min {
            font-size: 24rpx;
        }
    }
    .btns-box {
        text-align: right;
        padding: 20rpx 32rpx 0rpx;
        .btn {
            display: inline-block;
            text-align: right;
            padding: 10rpx 28rpx;
            border-radius: 50px;
            margin-left: 30rpx;
            font-size: 28rpx;
            background-color: #ffffff;
            color: #ff7596;
            border: 1px solid #ff7596;
        }
        .btn.update {
            color: #f0833b;
            border: 1px solid #f0833b;
        }
        .btn.report {
            color: #ff0000;
            border: 1px solid #ff0000;
        }
        .btn.cancel {
            color: #b9b9b9;
            border: 1px solid #b9b9b9;
        }
    }
}

// 商品
.sec_item {
    padding-top: 28rpx;
    .li {
        padding: 10rpx 32rpx;
    }
    // border-bottom: 1px solid #f1f1f1;

    .productBox {
        display: flex;
        .imgs {
            margin-right: 20rpx;
            image {
                width: 100rpx;
                height: 100rpx;
                background: #f1f1fe;
            }
        }
        .info {
            display: flex;
            width: 100%;
            .info-l {
                flex: 1;
            }
            .info-r {
                text-align: right;
                min-width: 150rpx;
                margin-left: 10rx;
                font-size: 30rpx;
                .min {
                    font-size: 22rpx;
                }
            }
            .name {
                font-size: 26rpx;
                color: #000;
                font-weight: bold;
            }
            .bottom {
                // padding-top: 10rpx;
                overflow: hidden;
                .nums {
                    float: left;
                    color: #888;
                    font-size: 26rpx;
                    margin: 6rpx 0;
                    // .old-price {
                    //     margin-left: 10rpx;
                    //     text-decoration: line-through;
                    // }
                    // .col-red {
                    //     font-size: 30rpx;
                    // }
                    // .mini {
                    //     font-size: 26rpx;
                    // }
                }
                .buy-btn {
                    margin: 6rpx 0;
                    float: right;
                    min-width: 140rpx;
                    text-align: right;
                }
            }
        }
    }
}
.textbg{
    width: 100%;
    height: 500rpx;
    background: linear-gradient(0deg, #ff5404 0%, #ff305a 30%, #ff7023 60%, #ff89a9 100%);
}
</style>